<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <div class="logo">
          <img src="~assets/images/logo.png" alt="logo" draggable="false" />
        </div>
      </div>
      <div class="loginForm">
        <el-form :model="loginForm" ref="loginRef" :rules="loginRules">
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user-solid"
              v-model="loginForm.username"
              clearable
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item prop="code" class="mg-bt-10">
            <el-row>
              <el-col :span="17">
                <el-input
                  prefix-icon="el-icon-key"
                  v-model="loginForm.code"
                  placeholder="验证码"
                  clearable
                  @keyup.enter.native="handleLogin"
                >
                </el-input>
              </el-col>
              <el-col :span="7" class="captcha">
                <el-image
                  :src="captcha"
                  @click="getCaptcha"
                  alt="验证码"
                  title="点击切换"
                ></el-image>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="mg-bt-10">
            <el-checkbox v-model="isRememberme" label="自动登录"></el-checkbox>
          </el-form-item>
          <el-button :loading="btnLoading" type="primary" @click="handleLogin"
            >登录</el-button
          >
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCaptchaApi, loginApi, getUserByTokenApi } from "api/login.js";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        code: "",
      },
      isRememberme: false,
      captcha: "",
      btnLoading: false,
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCaptcha();
    this.handleAutoLogin();
  },
  methods: {
    /**获取验证码 */
    async getCaptcha() {
      const { code, data } = await getCaptchaApi();
      if (code !== 300) return;
      this.captcha = data.captcha;
      //   console.log(data);
    },
    /**登录 */
    handleLogin() {
      this.$refs.loginRef.validate(async (vaild) => {
        if (!vaild) return;
        try {
          this.btnLoading = true;
          const { code, data } = await loginApi(this.loginForm);
          if (code !== 300) return;
          data.isRememberme = this.isRememberme;
          this.$store.dispatch("loginSuccess", data);
          this.$message.success("登录成功");
          this.$router.push("/home");
        } catch {
          this.btnLoading = false;
        }
      });
    },
    /**自动登录 */
    async handleAutoLogin() {
      const token = this.$store.state.user.token;
      // 若有token并且未登录，自动登录
      if (token && !this.$store.getters.isLogin) {
        const { data, code } = await getUserByTokenApi();
        if (code !== 300) return;
        data.token = token;
        data.isRememberme = true;
        this.$store.dispatch("loginSuccess", data);
        this.$message.success("已为您自动登录...");
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button {
  width: 100%;
}
::v-deep .el-card__header {
  padding: 8px 20px;
  text-align: center;
}
.logo {
  height: 50px;
  img {
    height: 100%;
  }
}

.login {
  background: url("~@/assets/images/bg.jpg") 30% no-repeat;
  background-size: contain;
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box-card {
  width: 400px;
  position: relative;
  right: 20%;
}
.captcha {
  .el-image {
    height: 40px;
    margin-left: 10px;
    object-fit: contain;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    border-radius: 4px;
  }
  line-height: 0px;
}
.mg-bt-10 {
  margin-bottom: 10px;
}
</style>